<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Redrawing</title>
</head>
<body>
<canvas id="physics_diagram" width="600" height="480"></canvas>
<script>
    const canvas = document.getElementById('physics_diagram');
    const ctx = canvas.getContext('2d');

    // Style and font settings to mimic the original hand-drawn diagram
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = 'bold 22px serif';

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY) {
        const headlen = 10; // length of head in pixels
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Helper function to draw the airplane
    function drawPlane(ctx, cx, cy) {
        ctx.beginPath();
        // Fuselage and Tail
        ctx.moveTo(cx - 25, cy + 2); // Tail bottom
        ctx.lineTo(cx + 10, cy + 2); // Fuselage bottom
        ctx.quadraticCurveTo(cx + 20, cy, cx + 15, cy - 2); // Nose
        ctx.lineTo(cx - 15, cy - 2); // Fuselage top
        ctx.lineTo(cx - 22, cy - 8); // Top of tail fin
        ctx.lineTo(cx - 28, cy - 7); // Back of tail fin
        ctx.lineTo(cx - 25, cy - 2); // Base of tail fin
        ctx.closePath();
        ctx.stroke();
        // Wing
        ctx.beginPath();
        ctx.moveTo(cx - 12, cy + 2);
        ctx.lineTo(cx, cy + 5);
        ctx.lineTo(cx + 5, cy + 5);
        ctx.lineTo(cx - 5, cy + 2);
        ctx.closePath();
        ctx.stroke();
    }

    // Define main coordinates for the diagram elements
    const y_ground = 350;
    const y_plane = 100;
    const x_dim_alt = 120;
    const x_observer = 280;
    const x_plane = 450;

    // Draw the main layout lines
    // Flight path
    ctx.beginPath();
    ctx.moveTo(x_dim_alt - 20, y_plane); // Start of T-bar
    ctx.lineTo(x_plane, y_plane);
    ctx.stroke();

    // Ground line
    ctx.beginPath();
    ctx.moveTo(x_dim_alt - 20, y_ground); // Start of T-bar
    ctx.lineTo(x_plane + 50, y_ground);
    ctx.stroke();

    // Vertical altitude dimension line
    ctx.beginPath();
    ctx.moveTo(x_dim_alt, y_plane);
    ctx.lineTo(x_dim_alt, y_ground);
    ctx.stroke();

    // Vertical line from plane to ground
    ctx.beginPath();
    ctx.moveTo(x_plane, y_plane);
    ctx.lineTo(x_plane, y_ground);
    ctx.stroke();

    // Draw the observer (stick figure)
    ctx.beginPath();
    ctx.arc(x_observer, y_ground - 15, 6, 0, 2 * Math.PI); // Head
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_observer, y_ground - 9);
    ctx.lineTo(x_observer, y_ground); // Body
    ctx.stroke();

    // Draw the horizontal distance dimension 'x'
    const y_dim_x = y_ground + 20;
    ctx.beginPath();
    ctx.moveTo(x_observer, y_ground);
    ctx.lineTo(x_observer, y_dim_x);
    ctx.moveTo(x_plane, y_ground);
    ctx.lineTo(x_plane, y_dim_x);
    ctx.moveTo(x_observer, y_dim_x);
    ctx.lineTo(x_plane, y_dim_x);
    ctx.stroke();

    // Draw the airplane
    drawPlane(ctx, x_plane, y_plane);

    // Draw the velocity arrow
    drawArrow(ctx, x_plane + 30, y_plane, x_plane + 110, y_plane);

    // Add text labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Altitude label ("8000 m") - drawn vertically
    ctx.save();
    ctx.translate(x_dim_alt - 40, (y_plane + y_ground) / 2);
    ctx.rotate(-Math.PI / 2);
    ctx.fillText('8000 m', 0, 0);
    ctx.restore();

    // Velocity label
    ctx.fillText('V = 600 m/s', x_plane + 20, y_plane - 30);

    // 'x = ?' label
    ctx.fillText('x = ?', (x_observer + x_plane) / 2, y_dim_x + 20);

    // Figure caption
    ctx.fillText('Fig. 1.226.', 300, 450);

</script>
</body>
</html>